<template>
  <el-card class="guest-container">
    <template #header>
      <div class="header">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleSolve"
          >解除禁用</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="handleForbid"
          >禁用账户</el-button
        >
      </div>
    </template>
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>
      <el-table-column prop="loginName" label="登录名"> </el-table-column>
      <el-table-column label="身份状态">
        <template #default="scope">
          <span
            :style="scope.row.lockedFlag == 0 ? 'color: green;' : 'color: red;'"
          >
            {{ scope.row.lockedFlag == 0 ? "正常" : "禁用" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否注销">
        <template #default="scope">
          <span
            :style="scope.row.lockedFlag == 0 ? 'color: green;' : 'color: red;'"
          >
            {{ scope.row.isDeleted == 0 ? "正常" : "注销" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间"> </el-table-column>
      <!-- <el-table-column
        label="操作"
        width="100"
      >
        <template #default="scope">
          <a style="cursor: pointer; margin-right: 10px" @confirm="handleSolve(scope.row)">解除禁用</a>
          <el-popconfirm
            title="确定禁用吗？"
            @confirm="handleForbid(scope.row)"
          >
            <template #reference>
              <a style="cursor: pointer">禁用账户</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "@/utils/axios";
import { ElMessage } from "element-plus";
export default {
  name: "Guest",
  setup() {
    const multipleTable = ref(null);
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
    });
    onMounted(() => {
      getGuestList();
    });
    // 获取轮播图列表
    const getGuestList = () => {
      state.loading = true;
      setTimeout(() => {
        const list = [
          {
            userId: 7837,
            nickName: "15203205545",
            loginName: "15203205545",
            passwordMd5: "e10adc3949ba59abbe56e057f20f883e",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 0,
            createTime: "2022-05-31 15:52:54",
          },
          {
            userId: 7836,
            nickName: "15203204450",
            loginName: "15203204450",
            passwordMd5: "e10adc3949ba59abbe56e057f20f883e",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-05-31 15:49:00",
          },
          {
            userId: 7835,
            nickName: "13700001234",
            loginName: "13700001234",
            passwordMd5: "e10adc3949ba59abbe56e057f20f883e",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-05-13 16:25:50",
          },
          {
            userId: 7834,
            nickName: "18117472244",
            loginName: "18117472244",
            passwordMd5: "14e1b600b1fd579f47433b88e8d85291",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-03-29 14:48:48",
          },
          {
            userId: 7833,
            nickName: "18307656636",
            loginName: "18307656636",
            passwordMd5: "59192df313429e15c7727505bf88720d",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-03-18 13:17:17",
          },
          {
            userId: 7832,
            nickName: "13631318876",
            loginName: "13631318876",
            passwordMd5: "e10adc3949ba59abbe56e057f20f883e",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-02-22 09:57:33",
          },
          {
            userId: 7831,
            nickName: "17303932222",
            loginName: "17303932222",
            passwordMd5: "d55235201a728e74af077deedc7d536d",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-02-16 16:14:24",
          },
          {
            userId: 7830,
            nickName: "17561725173",
            loginName: "17561725173",
            passwordMd5: "76419c58730d9f35de7ac538c2fd6737",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-01-10 01:51:19",
          },
          {
            userId: 7829,
            nickName: "17561725172",
            loginName: "17561725172",
            passwordMd5: "76419c58730d9f35de7ac538c2fd6737",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-01-09 16:57:48",
          },
          {
            userId: 7828,
            nickName: "17561725171",
            loginName: "17561725171",
            passwordMd5: "76419c58730d9f35de7ac538c2fd6737",
            introduceSign: "随新所欲，蜂富多彩",
            isDeleted: 0,
            lockedFlag: 1,
            createTime: "2022-01-08 14:23:36",
          },
        ];
        state.tableData = list;
        state.total = 7830;
        state.currentPage = 783;
        state.loading = false;
      }, 2000);
    };
    // 选择项
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
    };
    const changePage = (val) => {
      state.currentPage = val;
      getGuestList();
    };
    const handleSolve = () => {
      if (!state.multipleSelection.length) {
        ElMessage.error("请选择项");
        return;
      }
      axios
        .put(`/users/0`, {
          ids: state.multipleSelection.map((item) => item.userId),
        })
        .then(() => {
          ElMessage.success("解除成功");
          getGuestList();
        });
    };
    const handleForbid = () => {
      if (!state.multipleSelection.length) {
        ElMessage.error("请选择项");
        return;
      }
      axios
        .put(`/users/1`, {
          ids: state.multipleSelection.map((item) => item.userId),
        })
        .then(() => {
          ElMessage.success("禁用成功");
          getGuestList();
        });
    };
    return {
      ...toRefs(state),
      multipleTable,
      handleSelectionChange,
      getGuestList,
      changePage,
      handleSolve,
      handleForbid,
    };
  },
};
</script>

<style scoped>
.guest-container {
  min-height: 100%;
}
.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>